<!-- 考核统计 -->
<style lang="less" scoped>
.smallForm {
  display: inline-block;
}
</style>


<template>
  <div class="role">
    <Card :bordered="false">
      <p slot="title"
         class="white">统计分析 > <span class="select-font">考核统计</span></p>
      <div>
        <Form :model="searchItem"
              class="smallForm">
          <Input v-model="searchItem.name"
                 :maxlength="30"
                 style="width:200px;"
                 placeholder="请输入河长名称"></Input>
          <Input v-model="searchItem.town"
                 :maxlength="30"
                 style="width:200px;margin-left:25px"
                 placeholder="请输入所属镇"></Input>
          <DatePicker type="month"
                      :value="searchItem.month"
                      placeholder="请选择月份"
                      format="yyyy-MM"
                      @on-change="change"
                      style="width: 200px;margin-left:25px"></DatePicker>
        </Form>
        <Button type="info"
                style="margin-left:25px"
                @click="getTableData(1)">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table :data="assData"
             :columns="assColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
      <Modal v-model="moduleModal"
             width="800"
             :mask-closable="false"
             title="查看扣分项">
        <Table :data="deductData"
               :columns="deductColumns"
               stripe></Table>
      </Modal>
    </div>
  </div>
</template>


<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  data() {
    return {
      urlAssList: '/bus/chiefdeduct/list',
      assData: [],
      typeList: [
        {
          value: 'all',
          name: '全部',
        },
        {
          value: '禅城区',
          name: '禅城区',
        },
        {
          value: '南海区',
          name: '南海区',
        },
        {
          value: '三水区',
          name: '三水区',
        },
        {
          value: '顺德区',
          name: '顺德区',
        },
        {
          value: '高明区',
          name: '高明区',
        },
      ],
      assColumns: [
        {
          title: '河长姓名',
          key: 'chief_realname',
        },
        {
          title: '月份',
          render: (h, params) => {
            return h('div', {}, params.row.date_time.substring(0, 7));
          },
        },
        {
          title: '更新时间',
          key: 'update_time',
        },
        {
          title: '总分',
          key: 'report_total_socre',
        },
        {
          title: '当前分数',
          key: 'report_point',
        },
        {
          title: '所属区',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属区',
                data: this.typeList,
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.area = data;
                    this.getTableData();
                  } else {
                    this.searchItem.area = '';
                    this.getTableData();
                  }
                },
              },
            });
          },
          render: (h, params) => {
            return h('div', {}, params.row.location.area);
          },
        },
        {
          title: '所属镇',
          render: (h, params) => {
            return h('div', {}, params.row.location.town);
          },
        },
        {
          title: '操作',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                  },
                  style: {
                    marginRight: '5px',
                  },
                  on: {
                    click: () => {
                      this.moduleModal = true;
                      if (params.row.point_deduct) {
                        this.deductData = params.row.point_deduct;
                      } else {
                        this.deductData = [];
                      }
                    },
                  },
                },
                '查看扣分项'
              ),
            ]);
          },
        },
      ],
      moduleModal: false,
      searchItem: {
        name: '',
        area: '',
        town: '',
        month: '',
      },
      deductData: [],
      deductColumns: [
        {
          title: '时间',
          key: 'time',
        },
        {
          title: '分值',
          key: 'point',
        },
        {
          title: '说明',
          key: 'explain',
        },
      ],
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
    };
  },
  methods: {
    getTableData(page = 1) {
      let params = {
        data: {
          pageSize: this.Page.pageSize,
          page,
          searchValue: {},
          order: { date_time: -1 },
        },
        url: this.urlAssList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.assData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.searchItem.name !== '') {
        params.data.searchValue.chief_realname = `${this.searchItem.name}|#|like`;
      }
      if (this.searchItem.area !== '') {
        params.data.searchValue[
          'location.area'
        ] = `${this.searchItem.area}|#|like`;
      }
      if (this.searchItem.town !== '') {
        params.data.searchValue[
          'location.town'
        ] = `${this.searchItem.town}|#|like`;
      }
      if (this.searchItem.month !== '') {
        params.data.searchValue.month = this.searchItem.month;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.getTableData(page);
    },
    change(data) {
      this.searchItem.month = data;
    },
  },
  mounted() {
    this.getTableData();
    // this.searchItem.month = new Date().format('yyyy-MM')
  },
};
</script>
